<template>
    <div class="products-whats-included text-center products-bottom">
        <div class="recommended-title">What's Included</div>
        <swiper :options="swiperOption" id="swiper-whats-included">
            <swiper-slide v-for="item in items" :key="item.title">
                <div class="accessory">
                    <div class="content">
                        <img :src="item.image_path" /> {{item.title}}
                    </div>
                </div>
            </swiper-slide>
        </swiper>
        <div class="swiper-pagination visible-xs"></div>
    </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    data() {
        return {
            swiperOption: {
                pagination: '.products-whats-included .swiper-pagination',
                paginationClickable: true,
                simulateTouch: false,
                slidesPerView: 3,
                slidesPerGroup: 3,
                spaceBetween: 0,
                breakpoints: {
                    767: {
                        slidesPerView: 1,
                        slidesPerGroup: 1
                    }
                }
            }
        }
    },
    props: ['items']
}
</script>
<style>
.products-whats-included img {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 15px;
}

.products-whats-included .content {
    max-width: 350px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .products-whats-included .swiper-slide:last-of-type .accessory {
        border-right: none;
    }
    .products-whats-included .accessory {
        padding: 50px 20px;
        border-right: 3px solid #F0F1F2;
    }
}
</style>
